import React, {useEffect} from 'react';
import {observer} from 'mobx-react';
import {useStores} from '../libs/useStores';
import InfiniteScroll from 'react-infinite-scroller';
import {List, Spin} from 'antd';
import styled from 'styled-components';

const StyledDisplayList = styled.div`

`;
const Img = styled.img`
  width: 120px;
  height: 100px;
  object-fit: contain;
  border: 1px solid #eee;
`;


const DisplayList: React.FC = observer(() => {

    const {HistoryStore} = useStores();

    const loadMore = () => {
        console.log('Load More...');
        HistoryStore.find();
    };

    const options = {
        initialLoad: true,
        pageStart: 0,
        loadMore: loadMore,
        hasMore: !HistoryStore.isLoading && HistoryStore.hasMore,
        useWindow: true
    };

    useEffect(() => {
        HistoryStore.find()
        return () => {
            HistoryStore.reset()
        }
    }, [])


    return (
        <StyledDisplayList>
            <InfiniteScroll {...options}>
                <List
                    dataSource={HistoryStore.list}
                    renderItem={
                        (item, index) =>
                            <List.Item key={index}>
                                <div>
                                    <Img src={
                                        // @ts-ignore
                                        item.attributes.url.attributes.url
                                    }/>
                                </div>
                                <div>
                                    <h5>{
                                        // @ts-ignore
                                        item.attributes.filename
                                    }</h5>
                                </div>
                                <div>
                                    <a target="_blank"
                                       rel="noopener noreferrer"
                                       href={
                                           // @ts-ignore
                                           item.attributes.url.attributes.url
                                       }>{
                                        // @ts-ignore
                                           item.attributes.url.attributes.url
                                       }</a>
                                </div>
                            </List.Item>
                    }
                >
                    {
                        HistoryStore.isLoading && HistoryStore.hasMore && (
                            <Spin tip="加载中"/>
                        )
                    }

                </List>
            </InfiniteScroll>
        </StyledDisplayList>
    );
});

export default DisplayList;